<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>Ajax的get请求参数</h2>
    <form action="" name="myform" method="get">
        数值1：<input type="text" name="num1"><br/><br/>
        数值2：<input type="text" name="num2"><br/><br/>
        结果：<input type="text" name="result" readonly style="border:0px;"/><br/><br/>
    </form>
    <button>Ajax求和</button>

    <script>
        // 获取上面button按钮并绑定点击事件
        const bn = document.querySelector("button");
        bn.onclick = function(){
            // 获取表单信息，以get方式发送Ajax请求，并传递参数
            // 获取表单信息
            let m1 = document.myform.num1.value;
            let m2 = document.myform.num2.value;

            //1.创建Ajax请求对象 
            const xhr = new XMLHttpRequest();
            //2.设置请求信息
            xhr.open("GET","http://localhost:3000/test02?m1="+m1+"&m2="+m2);
            //3.执行发送    
            xhr.send();
            //4.响应处理
            xhr.onreadystatechange = function(){
                // 判断当前请求状态为4, 响应状态为200时
                if(xhr.readyState == 4 && xhr.status == 200){
                    // 获取响应内容
                    let data = xhr.responseText;
                    // 输出到页面中
                    document.myform.result.value = data;
                }
            }
        }

    </script>
</body>
</html>